<template>
  <div class="fixed">
    <div class="content"
         style='padding:0'>
      <div class="msgTop">
        <span>自定义按钮配置</span>
        <i class="el-icon-close fr"
           style="cursor:pointer;line-height:40px;font-size:13px;"
           @click="cancelTrigger"></i>
      </div>
      <el-form style='padding:20px'
               :model="ruleForm"
               :rules="rules"
               ref="ruleForm">
        <el-row class='event-info'>
          <h4>触发事件</h4>
          <el-form-item label="接口地址："
                        prop="URL"
                        style='display:flex;'>
            <el-input v-model="ruleForm.URL"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="header："
                        prop="Headers"
                        style='display:flex;'>
            <el-input type="textarea"
                      v-model="ruleForm.Headers"></el-input>
          </el-form-item>
        </el-row>
        <el-divider style='margin:0'></el-divider>
        <el-form-item>
          <h4>参数转换</h4>
          <el-table ref="multipleTable"
                    border
                    :header-cell-style="{background:'#F2F3F8'}"
                    :data="ruleForm.body"
                    tooltip-effect="dark"
                    style="width: 100%;height:300px;overflow-y:scroll;">
            <el-table-column prop="innerFieldName"
                             label="参数名称">
            </el-table-column>
            <el-table-column prop="innerFieldMeaning"
                             label="参数描述">
            </el-table-column>
            <el-table-column prop="externalFieldName"
                             label="对应参数名称">
              <template slot-scope="scope">
                <el-input type="text"
                          v-model="scope.row.externalFieldName"
                          placeholder="请输入参数名称"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="externalFieldValue"
                             label="默认值（如需）">
              <template slot-scope="scope">
                <el-input type="text"
                          v-model="scope.row.externalFieldValue"
                          placeholder="请输入值"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="cancelTrigger">取 消</el-button>
          <el-button type="primary"
                     @click="submitForm('ruleForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  props: ['customDialogDataInfo'],
  data () {
    // 校验请求投的数据是json格式的
    var headerJson = (rule, value, callback) => {
      try {
        JSON.parse(value.replace(' ', ''))
        callback()
      } catch (e) {
        return callback(new Error('请输入JSON格式的请求头数据'))
      }
    }
    return {
      dialogVisible: false, // 弹框显示的条件
      rules: {
        URL: [{ required: true, message: '请输入接口地址', trigger: 'blur' }],
        Headers: [{ required: false, validator: headerJson, trigger: 'blur' }]
      },
      ruleForm: {
        URL: this.customDialogDataInfo ? this.customDialogDataInfo.URL : '',
        Headers: this.customDialogDataInfo ? this.customDialogDataInfo.Headers : '',
        body: this.customDialogDataInfo ? this.customDialogDataInfo.body : []
      }
    }
  },
  computed: {
    // ruleForm () {
    //   let a = this.customDialogDataInfo ? {
    //     URL: this.customDialogDataInfo.URL,
    //     Headers: this.customDialogDataInfo.Headers,
    //     body: this.customDialogDataInfo.body
    //   } : {
    //     URL: '',
    //     Headers: '',
    //     body: []
    //   }
    //   return a
    // }
  },
  watch: {
    customDialogDataInfo (n, o) {
      this.ruleForm = n
    }
  },
  mounted () {
  },
  methods: {
    // 关闭弹框
    cancelTrigger () {
      // this.ruleForm = {}
      this.$emit('getMsg', { dialogVisible: this.dialogVisible, ruleForm: this.ruleForm })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.ruleForm.body = this.customDialogTableData
          this.$emit('getMsg', { dialogVisible: this.dialogVisible, ruleForm: this.ruleForm })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.dialog-footer {
  float: right;
}
.event-info >>> .el-form-item__content {
  width: 80%;
}
.event-info >>> .el-form-item__label {
  width: 100px;
}
>>> .el-divider--horizontal {
  margin: 0;
}
</style>
